<template>
  <div class="flex h-full">
    <a-card class="mr-2 py-2 h-full" :body-style="{ height: '100%', padding: '0 8px', display: 'flex', flexDirection: 'column' }">
      <SearchComb class="w-56" placeholder="姓名/助记码/卡号/手机号/证件号码" @search="queryTabs" />
      <div class="mt-2">
        <a-radio-group v-model:value="category" button-style="solid" class="flex radio-style" @change="queryTabs(formState)">
          <a-radio-button :value="2">未执行({{ unexecuted }})</a-radio-button>
          <a-radio-button :value="3">已执行({{ executed }})</a-radio-button>
        </a-radio-group>
      </div>
      <BaseList :data-source="listDataSource" :loading="loading">
        <template #renderItem="{ item }">
          <div class="py-2 px-3" :class="patientId === item.jzbh ? 'active' : ''" @click="onSelect(item)">
            <div class="flex justify-between">
              <div class="flex items-center">
                <div class="text-base font-bold text-primary truncate w-16" :title="item.brName">
                  {{ item.brName }}
                </div>
                <span class="mx-1">{{ item.brXb }}</span>
                <span>{{ item.brAge }}</span>
              </div>
              <div>{{ item.ksmc }}</div>
            </div>
            <div class="flex justify-between pt-2">
              <div class="text-right text-grey">{{ formatDate(item.ghsj, 'YYYY-MM-DD HH:mm') }}</div>
              <LabelValue class="text-right" :width="80" :value="item.rysx" />
            </div>
          </div>
        </template>
      </BaseList>
    </a-card>
    <div class="flex flex-col flex-1 overflow-hidden">
      <PatientInfoHeader :patient-info="patientInfo" :show-insurance="true" @change="onChange">
        <a-divider type="vertical" :style="{ height: '40px', margin: '0 16px' }" />
        <div>
          <div class="flex items-center">
            <LabelValue class="ml-4" label="卡号" :width="140" :value="patientInfo.brId" />
            <LabelValue class="ml-4" label="科室" :width="140" :value="patientInfo.ksmc" />
            <LabelValue class="" label="类别" :width="140" :value="patientInfo.ghlb" />
            <!-- <LabelValue class="" label="过敏史" :width="280" :tooltip="true" :value="patientInfo.brGms" /> -->
            <AllergyHistory :width="280" :value="patientInfo.brGms" :patient-info="patientInfo" @success="(e) => (patientInfo.brGms = e)" />
          </div>
          <div class="flex items-center">
            <LabelValue class="ml-4" label="门诊号" :width="140" :value="patientInfo.jzbh" />
            <LabelValue class="ml-4" label="医生" :width="140" :value="patientInfo.empName" />
            <LabelValue class="" label="时间" :width="200" :value="patientInfo.ghsj" />
          </div>
        </div>
      </PatientInfoHeader>
      <a-card class="mt-2 w-full flex-1">
        <div class="mb-3">
          <a-button type="primary" :disabled="tableData.findIndex((item) => item.zxzt === 0) === -1" @click="onCarryAll"> 执行全部 </a-button>
        </div>
        <BaseTable :loading="loading" column-code="00001025" :data-source="tableData" fill :pagination="false" :scroll="{ x: 1600 }">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'mc'">
              <MedicineInfo :value="{ mc: record.mc, gg: record.gg }" />
            </template>
            <template v-if="column.dataIndex === 'sl'"> {{ record.sl }} {{ record.dw }} </template>
            <template v-if="column.dataIndex === 'zxztmc'">
              <a-tag v-if="record.zxztmc === '已执行'" color="success">已执行</a-tag>
              <a-tag v-else color="blue">未执行</a-tag>
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-button v-if="record.zxzt == 0" type="link" size="small" @click="onCarry(record)"> 执行 </a-button>
              <ConfirmModal v-else description="撤销执行" @confirm="onCancels(record)">
                <a-button danger type="text" size="small"> 撤销 </a-button>
              </ConfirmModal>
            </template>
          </template>
        </BaseTable>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import SearchComb from '@/components/SearchComb'
import { formatDate } from '@/utils/format'
import PatientInfoHeader from '@/components/business/PatientInfoHeader'
import ConfirmModal from '@/components/ConfirmModal'
import { post, get } from '@/utils/request'
import BaseTable from '@/components/BaseTable'
import BaseList from '@/components/BaseList'

const loading = ref(false)
const tableData = ref([])
const listDataSource = ref([])
const patientId = ref('')
const formState = ref({})
const category = ref(2)
const unexecuted = ref(0)
const executed = ref(0)
const listInfo = ref({})

const patientInfo = usePatient(patientId, '门诊')
const onSelect = (item) => {
  patientId.value = item.jzbh
}

const onChange = () => {
  queryTabs(formState.value)
  onSelect(listInfo)
}

//执行
const onCarry = async (data) => {
  const ypid = data.id
  const res = await post('/outp/mzhs/doExecuteClinicalOrder', [ypid])
  if (res.code !== 0) return message.error(res.msg || '操作失败')
  message.success(res.msg || '操作成功')
  queryTabs(formState.value)
  queryList()
}
//撤销执行
const onCancels = async (data) => {
  const res = await get('/outp/mzhs/doCancelExecuteClinicalOrder?yzid=' + data.id)
  if (res.code !== 0) return message.error(res.msg || '操作失败')
  message.success(res.msg || '操作成功')
  queryTabs(formState.value)
  queryList()
}

//执行全部
const onCarryAll = async () => {
  const ypids = tableData.value.map((item) => {
    return item.id
  })
  const res = await post('/outp/mzhs/doExecuteClinicalOrder', ypids)
  if (res.code !== 0) return
  message.success(res.msg)
  queryList()
  queryTabs(formState.value)
}

//未执行-已执行人数
const getListQuantity = async (params) => {
  const res = await post('/outp/mzhs/getOutpRecordListByClinicalOrderQuantity', {
    eddate: formState.value.endDate ? formState.value.endDate : params?.endDate,
    stdate: formState.value.startDate ? formState.value.startDate : params?.startDate,
    xmlbs: ['0', '3', '6']
  })
  if (res.code !== 0) return message.error(res.msg)
  unexecuted.value = res.data.wzxrs
  executed.value = res.data.yzxrs
}

//右侧表格
const queryList = async () => {
  loading.value = true
  const { code, data } = await post('/outp/mzhs/getOutpClinicalOrderInfoList', {
    jzbh: patientId.value,
    status: '1',
    tclb: '1'
  })
  loading.value = false
  if (code !== 0) return
  tableData.value = data
}

//左侧数据
const queryTabs = async (params) => {
  getListQuantity()
  formState.value = params
  loading.value = true
  listDataSource.value = []
  const { code, data, msg } = await post('/outp/mzhs/getExecuteClinicalOrderInfoList', {
    pyjm: formState.value.searchKey ? formState.value.searchKey : params?.searchKey,
    eddate: formState.value.endDate ? formState.value.endDate : params?.endDate,
    stdate: formState.value.startDate ? formState.value.startDate : params?.startDate,
    xmlbs: ['0', '3', '6'],
    lb: category.value
  })
  loading.value = false
  if (code !== 0) return message.error(msg || '请求失败')
  const listData = data.sort((a, b) => a.yzzxzt - b.yzzxzt)
  listDataSource.value = listData
  if (!patientId.value) {
    patientId.value = listData[0]?.jzbh
    listInfo.value = listData[0]
  }
}

watch(
  () => patientId.value,
  (val) => {
    val && queryList()
  }
)
</script>

<style lang="less" scoped>
.radio-style {
  :deep(.ant-radio-button-wrapper) {
    width: 66.4%;
    padding: 0;
    text-align: center;
  }
}
</style>
